Adding a navigation menu to a WordPress block theme

I included two WordPress (WP) Navigation blocks in my template parts HTML files; one used a self-closing tag and the other was a multi-line tag.

The self-closing tag on its own showed a navigation menu of all the pages. Then I added this multi-line tag markup:

[…]
<!-- wp:navigation {"layout":{"itemsJustification":"right","justifyContent":"left","orientation":"horizontal","type":"flex"},"isResponsive":true} -->
  <!-- wp:navigation-link {"label":"Home","url":"/wordpress","kind":"custom","isTopLevelLink":true} /-->
  <!-- wp:navigation-link {"label":"About","url":"/wordpress/about","kind":"custom","isTopLevelLink":true} /-->
  <!-- wp:navigation-link {"label":"Blog","url":"/wordpress/blog","kind":"custom","isTopLevelLink":true} /-->
  <!-- wp:navigation-link {"label":"Contact","url":"/wordpress/contact","kind":"custom","isTopLevelLink":true} /-->
  <!-- wp:navigation-link {"label":"Log in","url":"/wordpress/wp-login.php","kind":"custom","isTopLevelLink":true} /-->
  <!-- wp:navigation-link {"label":"Log out","url":"/wordpress/wp-login.php?action=logout","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

Most of these links are duff, except for the login and logout links. Once I’d added this menu, I noticed that the self-closing-tag menu was showing the same links as the multi-line-tag menu. Even when I deleted the code above, that menu was shown. What was that about?

I looked in the site editor, and found the navigation. Clicking on it gave me the option to Select menu, so I clicked that. This gave me another menu, from which I chose Manage menus. I was taken to the admin area, and a page that showed the menus in a typical WP display:

This page was hiding at example.com/wordpress/wp-admin/edit.php?post_type=wp_navigation. I had never seen this page before in WP 5.9, and I wondered how to get to it from the admin menu. The simple answer was I couldn’t. It was nowhere to be found. I was most puzzled. I deleted both header navigation menus, and hunted around the code of the published WP block themes.

Of course: as in the days of the classic themes, navigation menus have to be registered, typically in functions.php. I copied the code from another theme into my Panda-Puss functions.php:

if ( ! function_exists( 'panda_puss_theme_setup' ) ) :
  /**
   * Sets up theme defaults and registers support for various WordPress features.
   *
   * Note that this function is hooked into the after_setup_theme hook, which runs
   * before the init hook. The init hook is too late for some features, such as indicating
   * support for post thumbnails.
   */
  function panda_puss_theme_setup() {
  […]
  /**
   * Add support for navigation menus.
   */
    register_nav_menus(
      array(
        'primary' => __('Primary navigation', 'panda-puss'),
        'secondary' => __('Secondary navigation', 'panda-puss'),
        'tertiary' => __('Tertiary navigation', 'panda-puss'),
        'social' => __('Social navigation', 'panda-puss')
      )
    );
  }
endif;
add_action( 'after_setup_theme', 'panda_puss_theme_setup' );

I could have named the menus after the positions they might go in, but it’s up to the user to decide that. I named them in order of importance instead, adding one for social media, should the user want that separately. I may or may not keep these.

I looked in the admin menu again, and found Appearance > Menus, as it used to be in the classic days.

The menu page allows me to create a menu and assign it to a location. The locations are given by the navigation menus I registered above.

I realise now that I might have been better off naming them after their locations after all.

Post script

I could have saved myself the bother of any of this if I’d realised that the registering of menu locations in functions.php has no bearing whatsoever on the placing of Navigation blocks. Navigation blocks can either be placed using the Site Editor or be added using the template and part HTML files. The only useful thing about registering menu locations in functions.php is that it gives the user somewhere to create menus, if not place them.

Conversely, the Navigation blocks placed programmatically cannot be edited from WP admin: clicking the edit links shown in fig.2 lead to a page showing the name of the menu but no other (editable) fields. I’m not sure I see the point.